<!-- 侧边栏 -->
<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu
        :collapse="isCollapse"
        :style="{width:!isCollapse?'230px':'64px'}"
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :default-active="active"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
      <!-- 折叠侧边菜单栏:collapse="isCollapse":style="{width:!isCollapse?'230px':'64px'}" -->
      <p class="mb-2">{{ !isCollapse?'DIDI陪诊':'DIDI' }}</p>
       <TreeMenu :menuData="menuData" :index="1"/>
      </el-menu>
    </el-col>
  </el-row>
  
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import TreeMenu from './TreeMenu.vue';
  import { useRouter } from 'vue-router';
  import { useStore } from 'vuex';


  const router = useRouter()
  const store = useStore()
  const active=computed(()=>store.state.menu.menuActive)
  // console.log(router)
  // const menuData=reactive(router.options.routes[0].children)
  //拿到路由数据
  const menuData=computed(()=> store.state.menu.routerList)
  
  const isCollapse=computed(()=> store.state.menu.isCollapse)

  const handleOpen = () => {}
  const handleClose  = () => {}

  
</script>

<style lang="less" scoped>
  .el-menu{
          height: 100%;
  }
  .mb-2{
    // padding-left: 28px;
    height: 50px;
    line-height: 63px;
    color: #fff;
    font-size: 18px;
    text-align: center;
  }
</style>  